<template>
	<view class="content">

		<!-- 当前所有的成员 -->
		<view class="cutHasUserGrid">
			<view class="itemUser" v-for="(item,index) in cutUserViewUseData" :key="item">
				<text class="cutUserList">{{index+1}}.{{ item }}</text>
				<image src="/static/icon_delete.jpg" class="deletebtn" @click="deleteArrange(index)"></image>
			</view>
			<view class="itemUser">
				<text @click="addToArr()" class="cutUserList" style="font-weight:bold;">+增加成员</text>
			</view>
			<view class="itemUser">
				<text @click="saveUser()" class="cutUserList" style="font-weight:bold;">保存列表</text>
			</view>
		</view>


		<view class="inputLayout">
			<!-- 需要匹配的数据 -->
			<textarea maxlength="1000" v-model="inputStr" placeholder="请输入当前要匹配的数据" class="inputView" />
		</view>

		<view class="resultLayout">
			<button @click="compCut()" class="sureButton">开始匹配</button>
			<text style="background-color: beige;margin-top: 16rpx;padding: 10rpx;"
				@longpress="copyTextOnLongPress()">{{compresult}}</text>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				compresult: '',
				title: 'Hello_test',
				cutUserViewUseData: [],
				inputStr: '',
			}
		},
		onLoad() {
			uni.$on('addData', (params) => {
				console.log('Received params:', params);
				// 在这里处理接收到的参数，比如更新页面数据等
				let addUserList = JSON.parse(params.addValue)
				this.cutUserViewUseData.push(...addUserList)
			});
			this.locationData()
		},
		onUnload() {
			uni.$off('addData')
		},
		methods: {
			locationData() {
				let res = uni.getStorageSync("useList")
				if (res) {
					console.log('结果：' + JSON.stringify(res))
					let cutList = JSON.parse(res)
					this.cutUserViewUseData.push(...cutList)
				}
			},

			saveUser() {
				uni.setStorage({
					key: "useList",
					data: JSON.stringify(this.cutUserViewUseData),
					success: function() {
						console.log('保存成功');
					}
				})
			},

			deleteArrange(index) {
				console.debug('---------' + JSON.stringify(index) + '----------')
				this.cutUserViewUseData.splice(index, 1)
			},
			addToArr() {
				console.debug('---------添加内容----------')
				// this.cutUser.push('B')
				uni.navigateTo({
					url: '/pages/PageAddUser/PageAddUser'
				})
			},

			compCut() {

				console.log('input value:', this.inputStr);
				this.compresult = ''
				for (var i = 0; i < this.cutUserViewUseData.length; i++) {
					const cItemUser = this.cutUserViewUseData[i].trim()
					if (cItemUser &&
						this.inputStr &&
						this.inputStr.indexOf(cItemUser) < 0) {
						// 没匹配上的话就筛选出来
						this.compresult += cItemUser + ',';
					}
				}
			},
			copyTextOnLongPress() {
				const textToCopy = this.compresult
				uni.setClipboardData({
					data: textToCopy,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					}
				});
			}
		}
	}
</script>

<style>
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.addBtn {
		width: 70rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
		border-radius: 5rpx;
		text-align: center;
		color: white;
		font-size: 50rpx;
		font-weight: bold;
		background-color: brown;
	}

	.cutHasUserGrid {
		display: flex;
		flex-wrap: wrap;
		width: 100vw;
	}

	.inputView {
		padding: 16rpx;
		min-height: 50rpx;
		background-color: antiquewhite;
		width: 100%;
		font-size: 28rpx;
	}

	.inputLayout {
		display: flex;
		margin-top: 32rpx;
		margin-bottom: 32rpx;
		width: 100vw;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/*每个页面公共css */
	.cutUserList {
		font-size: 28rpx;
		color: black;
	}

	.itemUser {
		border-color: #f00;
		border-radius: 5rpx;
		border-style: solid;
		border-width: 1rpx;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		display: flex;
		margin: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.deletebtn {
		width: 32rpx;
		height: 32rpx;
		margin-left: 12rpx;
	}


	.resultLayout {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		width: 100%;
	}

	.sureButton {
		font-size: 28rpx;
		background-color: azure;
		border-radius: 5rpx;
		width: 98vw;
	}
</style>